<template>
    <div>
        <!--地图-->
        <IndexModelMap
            @returnSetPage="returnSetPage"
            @showEvaluateResultSelect="showEvaluateResultSelect"
            @closeLegend="closeLegend"
            @isDataLayer="isDataLayer"
            @getLegendHtml="getLegendHtml"
            @showImgcreate="showImgcreate"
            :estimateTool="estimateTool"
            :estimateModelType="estimateModelType"
            :taskRegion="taskRegion"
            :takId="takId"
            :slopeVersionId="slopeVersionId"
            :lithologyVersion="lithologyVersion"
            :addLayerData="addLayerData"
            :sqlObj="sqlObj"
            :taskGoem="taskGoem"
            >
        </IndexModelMap>
        <!--抗震能力分布烈度面板-->
        <div v-if="showSeismicCapacityDistributionBool" class="earthquakeLevelAngleRadioSelectDiv" style="width:340px;">
        <div style="width: 30%;">
            <span style="font-size: 14px;font-weight: bold;">场地类别：</span>
        </div>
        <el-radio-group v-model="intensitySelect" @change="radioIntensitySelect" style="float: right;width: 73%;margin-top: -25px;">
            <el-radio v-for="item in intensityLegendData" :key="item.value" :label="item.value" :value="item.value">
            {{item.name}}
            </el-radio>
        </el-radio-group>
        </div>
        <div v-if="transcendProbabilityBool" class="earthquakeLevelAngleRadioSelectDiv" style="width:370px;padding: 15px 0 10px 15px;">
          <div>
            <div style="margin-left: 6%;">
              <span style="font-size: 14px;font-weight: bold;">场地类别：</span>
            </div>
            <el-radio-group v-model="intensitySelect" @change="radioIntensitySelect" style="float: right;width: 70%;margin-top: -25px;">
              <el-radio v-for="item in intensityLegendData" :key="item.value" :label="item.value" :value="item.value">
              {{item.name}}
              </el-radio>
            </el-radio-group>
          </div>
          <div style="margin-top: 5%;">
            <div>
              <span style="font-size: 14px;font-weight: bold;">50年超越概率：</span>
            </div>
            <el-radio-group v-model="probabilityData" @change="radioIntensitySelect" style="float: right;width: 70%;margin-top: -25px;">
              <el-radio v-for="item in probabilityLegendData" :key="item.value" :label="item.value" :value="item.value" :disabled="!route.query.pga.includes(item.value)">
              {{item.name}}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <!--生成图件-->
        <PrintMap v-if="showImgcreateBool"
                  :open="showImgcreateBool" :taskId="result.taskId"
                  :mapLevel1Category="result.mapLevel1Category" :mapLevel2Category="result.mapLevel2Category"
                  :legendSetList="result.legendSetList" :tempLayersSetList="result.tempLayersSetList"
                  @closeImgDialog="closeImgDialog"
        ></PrintMap>
        <!-- 数据图层显示 -->
        <div class="dataLayer" v-show="openLayer">
            <el-tree :data="dataLayer"
            show-checkbox @check-change="handleNodeClick" />
        </div> 
        <!--图层图例-->
        <div v-if="showHideLegendDivBool" class="layerMap-legend">
          <!--滚动条-->
          <el-scrollbar max-height="500px">
              <p>图例</p>
              <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
              </div>
          </el-scrollbar>
        </div>
    </div>
  </template>
  <script setup name="indexModelMapSelect">
  //地图
  import PrintMap from '@/map/slideAssess/distributionPatternAnalysis/printMap.vue';
  import IndexModelMap from '@/map/sandliquidAssess/stAnalysisAssess/indexModelMap.vue';
  import { iServerHttp } from "@/map/projMap.js"
  import { detailTask,getMapResultFile,getFinalMapResultFile } from "@/api/taskmanage/task";
  import { ref } from 'vue';
  const route = useRoute();
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  const addLayerData = ref({})// 添加图层数据
  const openLayer = ref(false)// 打开数据图层
  const estimateModelType = ref('')// 模型的类型 标贯法(饱和砂土或粉土1/饱和黄土2)  液化指数法(饱和砂土或粉土3/饱和黄土4)  层次分析法5
  const showSeismicCapacityDistributionBool = ref(false)// 打开烈度面板
  const transcendProbabilityBool = ref(false)// 超越概率面板
  const taskRegion = ref("");//获取任务的烈度等级
  const takId = ref("")// 任务ID
  const showImgcreateBool = ref(false)
  const slopeVersionId = ref("")// 坡度数据版本
  const lithologyVersion = ref("")// 地层岩性版本
  //抗震能力分布--烈度选择
  const intensitySelect = ref("2");
  const probabilityData = ref('2') // 超越概率选择的值
  const showHideLegendDivBool = ref(false);//是否显示图例
  const estimateTool = ref(false)// 初始化打开评估结果

  //抗震能力分布--烈度范围
  const intensityLegendData = ref([
    {code:"0",name:"活动构造区",value:"2"},
    {code:"1",name:"稳定大陆区",value:"3"},
  ]);
  // 超越概率 --概率选择
  const probabilityLegendData = ref([
    {code:"0",name:"2%",value:"2"},
    {code:"1",name:"10%",value:"10"},
    {code:"2",name:"63%",value:"63"},
  ])
  const closeLegend = () => {
    showHideLegendDivBool.value = false
  }
  //显示隐藏评估结果选择面板
  const showEvaluateResultSelect = (bool)=>{
    if(bool){
      if(route.query.modelType == '6'){
        showSeismicCapacityDistributionBool.value = true// 打开烈度面板
      }else if(route.query.modelType == '7') {
        transcendProbabilityBool.value = true// 超越概率面板
     }
      showHideLegendDivBool.value = true// 图例面板
      radioIntensitySelect()
    } else{
      //清空评估结果选择
      showSeismicCapacityDistributionBool.value = false
      transcendProbabilityBool.value = false
      showHideLegendDivBool.value = false
    }
  }
  const isDataLayer = (flag)=>{// 是否显示数据图层列表
    openLayer.value = flag
  }
  const returnSetPage = (bool)=>{//返回设定地震
    if(route.query.modelType == 1 || route.query.modelType == 2) {
      router.push({ 
        path: "/stAnalysisAssess/indexAssess1",
        query:{
          taskId: route.query.taskId,
					taskDistrict: route.query.taskDistrict,
					type: route.query.modelType == 1 ? '1' : '2',
		      metaTitle: route.query.modelType == 1 ? '饱和砂土或粉土标贯法' : '饱和黄土标贯法'
		    }
      })
    }else if(route.query.modelType == 3 || route.query.modelType == 4) {
      router.push({
        path: '/stAnalysisAssess/indexAssess2',
        query:{
          taskId: route.query.taskId,
					taskDistrict: route.query.taskDistrict,
					type: route.query.modelType == 3 ? '3' : '4',
		      metaTitle: route.query.modelType == 3 ? '饱和砂土或粉土液化指数法' : '饱和黄土液化指数法'
		    }
      })
    }else{
      router.push({ 
        path: "/stAnalysisAssess/indexAssess3",
        query:{
          taskId: route.query.taskId,
					taskDistrict: route.query.taskDistrict,
					type: '5',
		      metaTitle: '层次分析法'
		    }
      })
    }
  }
  const showImgcreate = (obj)=> {
    result.value.legendSetList = [];//清空
    showImgcreateBool.value = obj.bool
    let list = obj.list
    for(let i = 0;i < list.length;i++) {
      let params = list[i]
      if(params != undefined) {
        result.value.legendSetList.push({name: params.tempLayerId,url: params.layerUrl})
        result.value.tempLayersSetList.push({name: params.tempLayerId,url: params.layerUrl})
      }
    }
    result.value.legendSetList.push({
        name: 'district_boundary_china@fxfzypg',
        url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
      })
    //图层（临时图层）url列表--用于显示图例
    result.value.tempLayersSetList.push({
        name: 'district_boundary_china@fxfzypg',
        url: iServerHttp() + '/iserver/services/map-fxfzypg/rest/maps/district_boundary_china@fxfzypg'
      })
  }
  //关闭生成图件窗口
  const closeImgDialog = (bool)=>{
    showImgcreateBool.value = false;
  }
  const data = reactive({// 图层列表数据
    dataLayer: [
      {id: 1,label: '地层岩性数据',name: '地层岩性数据',radioLabel: '',code: '',table: '',url: iServerHttp()+"/iserver/services/map-datacenter/rest/maps/地层岩性",zIndex: '', fieldId: ''},
      //{id: 2,label: '综合地形指标',name: '综合地形指标',radioLabel: '',code: '',table: '',url: '',zIndex: '', fieldId: ''},
      {id: 3,label: '水系数据',name: '水系数据',radioLabel: '',code: '',table: '',url: iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_hyda@datacenter",zIndex: '', fieldId: ''},
      {id: 4,label: '场地类别',name: '场地类别',radioLabel: '',code: '',table: '',url: iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_site_category@datacenter",zIndex: '', fieldId: ''},
      //{id: 5,label: '地震动峰值加速度',name: '地震动峰值加速度',radioLabel: '',code: '',table: '',url: '',zIndex: '', fieldId: ''}
    ],
    result:{
      taskId: route.query.taskId,//任务ID
      mapLevel1Category:"7",//一级图件分类
      mapLevel2Category:"14",//二级图件分类
      legendSetList:[],//图层（临时图层）url列表--用于显示图例
      tempLayersSetList:[],//图层（临时图层）url列表--用于显示图层
    },
  })
  let {
    dataLayer,result
  } = toRefs(data);
  
  function radioIntensitySelect(){
    takId.value = route.query.taskId
    taskRegion.value = ''
    // mapLoading("正在查询，请稍候...");
    if(route.query.modelType == '1' || route.query.modelType == '2' || route.query.modelType == '3' || route.query.modelType == '4'){//抗震能力分布烈度选择事件
      slopeVersionId.value = route.query.slopeVersionId
      if(route.query.modelType == '1' || route.query.modelType == '2') {
        setTimeout(() => {
          taskRegion.value = intensitySelect.value
        }, 1000)
      }else if(route.query.modelType == '3' || route.query.modelType == '4') {
        setTimeout(() => {
          taskRegion.value = intensitySelect.value
        }, 1000)
      }
    }else if(route.query.modelType == '5'){//超越概率选择事件
      getMapResultFile({taskId: route.query.taskId,dmslId: route.query.dmslId, type: '1'}).then(res => {
        taskRegion.value = res.data
      }).catch()
    }else if(route.query.modelType == '6') {
      getMapResultFile({taskId: route.query.taskId,dmslId: route.query.dmslId, type: intensitySelect.value}).then(res => {
        taskRegion.value = res.data
      }).catch()
    }else if(route.query.modelType == '7') {
      getFinalMapResultFile({taskId: route.query.taskId,dmslId: route.query.dmslId,
      landform: intensitySelect.value == '2'?'活动构造区':'稳定大陆区',pga: probabilityData.value}).then(res => {
        taskRegion.value = res.data
      }).catch()
    }
  }
  const layerShowHideArray = ref([]);//图层是否显示数组
  //图例
  const getLegendHtml = (obj)=>{
    if(obj!=null){
      layerShowHideArray.value = [{
        name: obj.name,
        show: obj.show,
        legendHtml: obj.legendHtml
      }];
      showHideLegendDivBool.value = true;// 打开图例面板
    }
  }
  function handleNodeClick (row,flag){// 数据图层点击事件
    let params = {
      data: row,
      layerState: flag
    }
    addLayerData.value = params
  }
  const sqlObj = ref({})
  function getTaskInfoById(){// 初始化数据加载
    taskRegion.value = ''
    sqlObj.value = {
      dmslId: route.query.dmslId,
      earthquakeAcceleration: route.query.earthquakeAcceleration,
      liquefactionGroundWaterDepth: route.query.liquefactionGroundWaterDepth,
    }
    estimateModelType.value = route.query.modelType
    estimateTool.value = true
    // showHideLegendDivBool.value = true// 打开图例面板
    if(route.query.modelType == '1' || route.query.modelType == '2' || route.query.modelType == '3' || route.query.modelType == '4' || route.query.modelType == '5') {
      showSeismicCapacityDistributionBool.value = false // 打开烈度面板
      transcendProbabilityBool.value = false //关闭超越概率面板
    }else if(route.query.modelType == '6'){
      showSeismicCapacityDistributionBool.value = true
      transcendProbabilityBool.value = false
    }else if(route.query.modelType == '7'){
      showSeismicCapacityDistributionBool.value = false
      transcendProbabilityBool.value = true
    }
    radioIntensitySelect()
  }
  const mapLoading = (msg)=>{//地图查询loading
    if(msg!=null){
      proxy.$modal.loading(msg);
    }else{
      proxy.$modal.closeLoading();
    }
  }
  const taskGoem = ref('')
  //获取任务
  function getTask(){
    detailTask({ dtId:  route.query.taskId }).then((response) => {
      if(response.data.geom){
        taskGoem.value = response.data.geom
      }
    });
  }
  onMounted(() => {
    setTimeout(() => {
      getTask()
    },200)
    getTaskInfoById();
    if(route.query.pga){
      probabilityData.value = route.query.pga[0]
    }
  })
  
  </script>
  <style scoped lang="scss">
  .el-radio {
    color: white;
  }
  /*地震影响场|评估结果震级、角度选择面板*/
  .earthquakeLevelAngleRadioSelectDiv {
    position: absolute;
    top: 15px;
    right: 30px;
    width: 369px;
    background-color:rgba(0,45,87,0.8)!important;
    color: white;
    padding: 15px;
    // box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    border:1px solid #707070;
    border-radius: 4px;
  }
  /*基础数据图层选择面板*/
  .new-layerSelectDiv {
    position: absolute;
    top: 170px;
    left: 99px;
    width: 256px;
    height: 70px;
    background: #fff;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    border: 1px solid #707070;
    border-radius: 4px;
    padding: 18px;
    padding-right: 0px;
  }
  /*评估结果图层图例*/
  .new-evaluateResultDiv {
    position: absolute;
    top: 50%;
    right: 0px;
    background: #fff;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    border: 1px solid #707070;
    border-radius: 4px;
    padding: 5px;
  }
  .new-evaluateResultDiv div {
    position: relative;
    height: 16px;
    line-height: 16px;
    font-size: 13px;
    margin: 8px;
  }
  .new-evaluateResultDiv div span {
    line-height: 16px;
    font-size: 13px;
  }
  .new-evaluateResultDiv div div {
    position: relative;
    top: 2px;
    left: 8px;
    width: 30px;
    height: 14px;
    margin: 0px !important;
    margin-right: 25px !important;
    display: inline-block;
  }
  .dataLayer {
    height: 280px;
    text-align: center;
    // width: 320px;
    position: absolute;
    top: 17px;
    left: 100px;
    // background: #001b43;
    background-color:rgba(228, 232, 237, 0.6)!important;
    .el-tree {
      margin-top: 10px;
      background: none;
      color:#000;
    }
  }
  //图例
  .layerMap-legend {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-height: 50px;
    background: #fff;
    padding: 10px;
    overflow: auto;
    min-width: 200px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    border:1px solid #707070;
    border-radius: 4px;
  }
  .layerMap-legend p:first-child{
    text-align: center;font-weight: bold;
  }
  </style>